<!DOCTYPE html>
<html lang="en" ng-app>

<head>
    <meta charset="UTF-8">
    <title>题库</title>
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <link href="./css/font-awesome.css" rel="stylesheet">
    <link href="./css/main.css" rel="stylesheet">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/jquery.pin.js"></script>
	<script src="js/angular.min.js"></script>

    <style type="text/css">
        /* Custom Styles */
        ul.nav-tabs {
            width: 140px;
            margin-top: 50px;
            border-radius: 4px;
            border: 1px solid #ddd;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
        }
        ul.nav-tabs li {
            margin: 0;
            border-top: 1px solid #ddd;
        }
        ul.nav-tabs li:first-child {
            border-top: none;
        }
        ul.nav-tabs li a {
            margin: 0;
            padding: 8px 16px;
            border-radius: 0;
        }
        ul.nav-tabs li.active a,
        ul.nav-tabs li.active a:hover {
            color: #fff;
            background: #0088cc;
            border: 1px solid #0088cc;
        }
        ul.nav-tabs li:first-child a {
            border-radius: 4px 4px 0 0;
        }
        ul.nav-tabs li:last-child a {
            border-radius: 0 0 4px 4px;
        }
        ul.nav-tabs.affix {
            top: 10px;
            /* Set the top position of pinned element */
        }
    </style>


</head>

<body data-spy="scroll" data-target="#myScrollspy" ng-controller="questionbank">
    <!--导航栏-->
    <div class="navbar navbar-njust navbar-fixed" role="navigation">
        <div class="container clearfix">
            <div class="navbar-header">

                <div class="navbar-brand">
                    <i class="fa fa-cubes"></i>
                    <h4 id="maintitle">课程考试系统</h4>
                </div>
            </div>

            <div class="navbar-collapse collapse">

                <ul class="nav navbar-nav" style="margin-left:200px">
                    <li class="pull-left">
                        <a href="home.html">首页</a>
                    </li>
                    <li class="pull-left">
                        <a href="teacher.html#">教师页面</a>
                    </li>
                    <li class="pull-left">
                        <a href="EditExam.html">新建考试</a>
                    </li>
					<li class="pull-left active">
                        <a href="questionbank.html">增加题目</a>
                    </li>
                </ul>
				
                <div class="list-unstyled pull-right clearfix dropdown" style="margin-top:25px">
                    <li class="dropdown-toggle " id="dropdownMenu1" data-toggle="dropdown">
                        <a href="" style="width:200px">欢迎您，<span id="username">
							{{teacher.name}}</span>老师</a>
                    </li>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="teacherEditInfo.html">我的账户</a>
                        </li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">注销</a>
                        </li>
                    </ul>

                </div>
            </div>
        </div>

    </div>

	<!-- main -->
    <div class="container">
        <div class="row" style="text-align:center">
            <h2>题库管理</h2>
        </div>
        <div class="row">
			<!-- courses -->
            <div class="col-md-2">
                <div class="row">
                    <div class="col-md-12">
                        <div id="myScrollspy" class="pinned">
                            <div class="dropdown" style="margin-top:20px">
                                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
                                    选择课程
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="item"
									ng-repeat="course in courses" ng-click="chooseCourse(course.courseNo)">
										{{course.courseName}}</a>
                                    </li>
                                </ul>
                            </div>

                            <ul class="nav nav-tabs nav-stacked" id="myNav">
                                <li class="active">
                                    <a href="#xuanze">选择题</a>
                                </li>
                                <li>
                                    <a href="#tiankong">填空题</a>
                                </li>
                                <li>
                                    <a href="#jianda">简答题</a>
                                </li>
                            </ul>

                        </div>
                    </div>
                    <br/>
                    <br/>
				</div>

            </div>


            <div class="col-md-10">

                <div class="row">
                    <div class="col-md-2" id="xuanze"> <!--选择题-->
                        <h3>选择题</h3>
                    </div>
                    <div class="col-md-1">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#xuanzeModal">增加</button>
                    </div>
					<div ng-repeat="multiple in multiples" >
					<div class="row">
                        <div class="col-md-10">
                            <pre>{{multiple.questionStem}}</pre>
                        </div>
                        <div class="col-md-2">
                            标准答案：{{multiple.answer}}
                        </div>
                        <div class="col-md-5">
                            知识点：
							<span class="label label-info"ng-repeat=
								"knowledge in multiple.knowledge">{{knowledge}}</span>
                        </div>
                        <div class="col-md-2">
                            难度：{{multiple.difficulty}}
                        </div>
                        <div class="col-md-2">
                            分值：{{multiple.value}}
                        </div>
                    </div>
					<br/>
					<br/>
                    </div>
					
					<div class="col-md-2" id="tiankong"> <!--填空题-->
                        <h3>填空题</h3>
                    </div>
                    <div class="col-md-1">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#tiankongModal">增加</button>
                    </div>
					<div ng-repeat="shortAnswer in shortAnswers" >
					<div class="row">
                        <div class="col-md-10">
                            <pre>{{shortAnswer.questionStem}}</pre>
                        </div>
                        <div class="col-md-2">
                            标准答案：{{shortAnswer.answer}}
                        </div>
                        <div class="col-md-5">
                            知识点：
							<span class="label label-info"ng-repeat=
								"knowledge in shortAnswer.knowledge">{{knowledge}}</span>
                        </div>
                        <div class="col-md-2">
                            难度：{{shortAnswer.difficulty}}
                        </div>
                        <div class="col-md-2">
                            分值：{{shortAnswer.value}}
                        </div>
                    </div>
					<br/>
					<br/>
                    </div>
	
					<div class="col-md-2" id="jianda"> <!--简答题-->
                        <h3>简答题</h3>
                    </div>
                    <div class="col-md-1">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#jiandaModal">增加</button>
                    </div>
					<div ng-repeat="longAnswer in longAnswers" >
					<div class="row">
                        <div class="col-md-10">
                            <pre>{{longAnswer.questionStem}}</pre>
                        </div>
                        <div class="col-md-2">
                            标准答案：{{longAnswer.answer}}
                        </div>
                        <div class="col-md-5">
                            知识点：
							<span class="label label-info"ng-repeat=
								"knowledge in longAnswer.knowledge">{{knowledge}}</span>
                        </div>
                        <div class="col-md-2">
                            难度：{{longAnswer.difficulty}}
                        </div>
                        <div class="col-md-2">
                            分值：{{longAnswer.value}}
                        </div>
                    </div>
					<br/>
					<br/>
                    </div>
	
				</div>
            </div>


        </div>

    </div>
	
    <!-- 选择题Modal -->
    <div class="modal fade" id="xuanzeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">增加选择题</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-1">题干：</div>
                        <div class="col-md-11">
                            <textarea class="form-control" rows="6" cols="112" style="resize: none;" placeholder="" ng-model="problem.questionStem"></textarea>
                        </div>
                    </div>
                    <div class="row" style="margin-top:10px;margin-bottom:10px">
                        <div class="col-md-1">答案：</div>
                        <div class="col-md-1">A：</div>
                        <div class="col-md-10">
                            <input type="text" class="form-control" placeholder="">
                        </div>


                        <div class="col-md-1 col-md-offset-1">B：</div>
                        <div class="col-md-10">
                            <input type="text" class="form-control" placeholder="">
                        </div>
                        <div class="col-md-1 col-md-offset-1">C：</div>
                        <div class="col-md-10">
                            <input type="text" class="form-control" placeholder="">
                        </div>
                        <div class="col-md-1 col-md-offset-1">D：</div>
                        <div class="col-md-10">
                            <input type="text" class="form-control" placeholder="">
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-md-2">知识点：</div>
                        <div class="col-md-3">
                            <input type="text" class="form-control" placeholder="" ng-model="problem.knowledge[0]">
                        </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control" placeholder="" ng-model="problem.knowledge[1]">
                        </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control" placeholder="" ng-model="problem.knowledge[2]">
                        </div>
                    </div>
                    <div class="row" style="margin-top:10px">
						<!--div class="col-md-2">标准答案：</div>
                        <div class="col-md-2">
                            <div class="dropdown" >
                                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown">
                                    选择答案：
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                    <li role="presentation" ng-repeat="a in [A,B,C,D]"><a role="menuitem" tabindex="-1" href="#" class="item"ng-click="chooseAnswer(a)">{{a}}</a>
                                    </li>
                                </ul>
                            </div>
                        </div-->
                        <div class="col-md-2">难度：</div>
                        <div class="col-md-2">
                            <div class="dropdown" >
                                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown">
                                    选择难度：
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                    <li role="presentation" ng-repeat="a in [1,2,3,4,5]"><a role="menuitem" tabindex="-1" href="#" class="item"ng-click="chooseDifficulty(a)">{{a}}</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-2">
                            分值：
                        </div>
                        <div class="col-md-2">
                            <input type="text" class="form-control" placeholder="" ng-model="problem.value">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" 
						ng-click="addQuestion('xuanze')">
						确认添加
					</button>
                </div>
			</div>
        </div>
    </div>
    
    <!-- 填空题Modal -->
    <div class="modal fade" id="tiankongModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">增加填空题</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-1">题干：</div>
                        <div class="col-md-11">
                            <textarea class="form-control" rows="6" cols="112" style="resize: none;" placeholder="" ng-model="problem.questionStem">
							</textarea>
                        </div>
                    </div>
                    <div class="row" style="margin-top:10px;margin-bottom:10px">
                        <div class="col-md-1">答案：</div>
                        <div class="col-md-11">     
                            <input type="text" class="form-control" placeholder="" ng-model="problem.answer">
                        </div>
                        

                    </div>
                    <div class="row">
                        <div class="col-md-2">知识点：</div>
                        <div class="col-md-3">
                            <input type="text" class="form-control" placeholder="" ng-model="problem.knowledge[0]">
                        </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control" placeholder="" ng-model="problem.knowledge[1]">
                        </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control" placeholder="" ng-model="problem.knowledge[2]">
                        </div>
                    </div>
                    <div class="row" style="margin-top:10px">
                        <div class="col-md-2">难度：</div>
                        <div class="col-md-2">
                            <div class="dropdown" >
                                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown">
                                    选择难度：
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                    <li role="presentation" ng-repeat="a in [1,2,3,4,5]"><a role="menuitem" tabindex="-1" href="#" class="item"ng-click="chooseDifficulty(a)">{{a}}</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-2">
                            分值：
                        </div>
                        <div class="col-md-2">
                            <input type="text" class="form-control" placeholder="" ng-model="problem.value">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" 
						ng-click="addQuestion('tiankong')">
						确认添加
					</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 简答题Modal -->
    <div class="modal fade" id="jiandaModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">增加简答题</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-1">题干：</div>
                        <div class="col-md-11">
                            <textarea class="form-control" rows="6" cols="112" style="resize: none;" placeholder="" ng-model="problem.questionStem"></textarea>
                        </div>
                    </div>
                    <div class="row" style="margin-top:10px;margin-bottom:10px">
                        <div class="col-md-1">答案：</div>
                        <div class="col-md-11">     
                            <textarea class="form-control" rows="6" cols="112" style="resize: none;" placeholder="" ng-model="problem.answer"></textarea>
                        </div>
                        

                    </div>
                    <div class="row">
                        <div class="col-md-2">知识点：</div>
                        <div class="col-md-3">
                            <input type="text" class="form-control" placeholder="" ng-model="problem.knowledge[0]">
                        </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control" placeholder="" ng-model="problem.knowledge[1]">
                        </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control" placeholder="" ng-model="problem.knowledge[2]">
                        </div>
                    </div>
                    <div class="row" style="margin-top:10px">
                        <div class="col-md-2">难度：</div>
                        <div class="col-md-2">
                            <div class="dropdown" >
                                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown">
                                    选择难度：
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                    <li role="presentation" ng-repeat="a in [1,2,3,4,5]"><a role="menuitem" tabindex="-1" href="#" class="item"ng-click="chooseDifficulty(a)">{{a}}</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-2">
                            分值：
                        </div>
                        <div class="col-md-2">
                            <input type="text" class="form-control" placeholder="" ng-model="problem.value">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" 
						ng-click="addQuestion('jianda')">
						确认添加
					</button>
                </div>
            </div>
        </div>
    </div>
       
    
    <!--页脚-->
    <footer class="footer clearfix">
        <div class="container">
            <ul class="list-unstyled list-inline pull-left">
                <li>
                    <a href="#">FAQ</a>
                </li>
                <li>
                    <a href="#">Git</a>
                </li>
                <li>
                    <a href="#">Blog</a>
                </li>
            </ul>
            <p class="pull-right">@ 2014 软件项目管理团队</p>

        </div>
    </footer>
    
    

    <script>
        $(".pinned").pin({
            containerSelector: ".container"
        });
    </script>
    <script>
        $(document).ready(function () {
            $(".item").click(function () {
                $(this).parent().parent().siblings("button").html($(this).text() + '<span class="caret"></span>');
            });

        });
    </script>
	
	<script> <!-- angular -->
		
		function questionbank($scope,$http){
			//init
			var teacher = new Object();
			var courses = new Array();
			var courseNo;
			
			var problem = new Object(); 
			problem.knowledge = new Array();
			var multiples = new Array(), shortAnswers = new Array() , longAnswers = new Array();
			
			$scope.teacher = teacher; $scope.courses = courses; $scope.problem = problem;
			$scope.multiples = multiples;  
			$scope.shortAnswers = shortAnswers;   
			$scope.longAnswers = longAnswers;
			
			//init
			teacher.name = "foolifish07";
			
			for(var i=0;i<3;i++) {
				courses[i] = new Object();
				courses[i].courseNo = i;
				courses[i].courseName = '计算机组成原理'+i;
			}
			
			for(var i = 0;i<2;i++){
				multiples[i] = new Object();
				
				multiples[i].questionStem = '1.一个C程序的执行是从_____。         \nA)本程序的main函数开始,到main函数结束               B)本程序文件的第一个函数开始,到本程序文件的最后一个函数结束 \nC)本程序的main函数开始,到本程序文件的最后一个函数结束  D)本程序文件的第一个函数开始,到本程序main函数结束';
				multiples[i].difficulty = 3;
				multiples[i].value = 2;
				multiples[i].answer = "我是答案";
				
				multiples[i].knowledge  = new Array();
				multiples[i].knowledge[0] = '并查集';
				multiples[i].knowledge[1] = '垃圾暴力';
			}
			for(var i = 0;i<3;i++){
				shortAnswers[i] = new Object();
				shortAnswers[i].questionStem = '1.若x和n均是int型变量,且x和n的初值均为5,则计算表达式 x+=n++ 后x的值为 ____,n的值为6.';
				shortAnswers[i].difficulty = 3;
				shortAnswers[i].value = 2;
				shortAnswers[i].answer = "我是答案";
				
				shortAnswers[i].knowledge  = new Array();
				shortAnswers[i].knowledge[0] = '并查集';
				shortAnswers[i].knowledge[1] = '垃圾暴力';
			}
			for(var i = 0;i<4;i++){
				longAnswers[i] = new Object();
				//init[i].describe = "asdfdsa";
				longAnswers[i].questionStem = '1.关键字和一般标识符有什么不同？';
				longAnswers[i].difficulty = 3;
				longAnswers[i].value = 2;
				longAnswers[i].answer = "我是答案";
				
				longAnswers[i].knowledge  = new Array();
				longAnswers[i].knowledge[0] = '并查集';
				longAnswers[i].knowledge[1] = '你妹夫';
			}
			
			problem.knowledge = new Array();
			
			//get active data
			$http.get("teacher!getInfo.action").success(function(data){
				$scope.teacher = teacher = angular.copy(data.teacher);
			}).error(function(){
				//alert('wocao fail');
			});
			
			// choose course action
			$scope.chooseCourse = function(courseNo){
				//alert(exam.name);
				$scope.courseNo = courseNo;
				//alert(exam.courseNo);
			}
			
			$scope.chooseAnswer = function(a){
				problem.answer = answer;
			}
			$scope.chooseDifficulty = function(difficulty){
				problem.difficulty = difficulty;
			}
			$scope.addQuestion=function(type){
				var to;
				problem.type = type;
				
				if ( type=='xuanze' ) to = multiples ;
				if ( type=='tiankong' ) to = shortAnswers;
				if ( type=='jianda' ) to = longAnswers;
				var len = to.length;
				//alert(problem.knowledge.length);
				to[len] = angular.copy(problem);
			}
		};
		
	</script>
	
</body>

</html>